<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id='increment'>+1</button>
  <span id='box'>0</span>
  <button id='decrement'>-1</button>

  <script src="./myRedux.js"></script>
  <script src="./middlewares/logger.js"></script>
  <script src="./middlewares/thunk.js"></script>

  <script>
    function counterReducer(state, action) {
      switch (action.type) {
        case 'increment':
          return state + 1;
        case 'decrement':
          return state - 1;
        default:
          return state
      }
    }

    function enhancer(createStore) {
      return function (reducer, preloadedState) {
        var store = createStore(reducer, preloadedState)
        var dispatch = store.dispatch;

        function _dispatch(action) {
          if (typeof action === 'function') {
            return action(dispatch)
          }

          dispatch(action)
        }

        return {
          ...store,
          dispatch: _dispatch
        };
      }
    }

    const rootReducer = combineReducers({ counter: counterReducer })

    // const store = createStore(reducer, 0, enhancer);
    const store = createStore(rootReducer, {
      counter: 100
    }, applyMiddleware(logger, thunk));

    function increment() {
      return { type: 'increment' }
    }

    function decrement() {
      return { type: 'decrement' }
    }

    var actions = bindActionCreators({
      increment,
      decrement
    }, store.dispatch)

    document.getElementById('increment').onclick = function () {
      // store.dispatch(function (dispatch) {
      //   setTimeout(() => {
      //     dispatch({ type: 'increment' })
      //   }, 1000)
      // })

      // store.dispatch({ type: 'increment' })

      actions.increment()
    };

    document.getElementById('decrement').onclick = function () {
      // store.dispatch({ type: 'decrement' })
      actions.decrement()
    };

    store.subscribe(() => {
      document.getElementById('box').innerText = store.getState().counter
    });
  </script>
</body>

</html>